﻿<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Adminage - Admin Dashboard</title>

    <!-- favicon -->
    <link rel="icon" href="{% static 'assets/img/favicon.png' %}"sizes="16x16" type="image/png" />

    <!-- Stylesheet Link -->
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}" />
{#    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">  #}
</head>

<body class="t-bg-primary mx-sidenav-not-collapsed">


    <!-- Page Wrapper -->
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col-9 col-xxl-10 flex-grow-1">
                <div class="container-fluid px-2 px-xxl-0">
                    <div class="row g-2 g-xxl-0">
                        <div class="col-12">
                            <div class="mx-body">
                                <header class="header sticky-top d-none d-xl-block">
                                    <div class="pagination t-bg-16">
                                        <div class="container-fluid px-0">
                                            <div class="row g-0">
                                                <div class="col-12">
                                                    <ul class="pagination-bar t-list">
                                                        <li class="pagination-bar__list">
                                                            <a href="#"
                                                                class="t-link pagination-bar__link text-capitalize">
                                                            </a>
                                                        </li>
                                                        <li class="pagination-bar__list">
                                                            <a href="#"
                                                                class="t-link pagination-bar__link text-capitalize">
                                                            </a>
                                                        </li>
                                                        <li class="pagination-bar__list">
                                                            <a href="#"
                                                                class="t-link pagination-bar__link text-capitalize">
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </header>
                                <div class="mx-body__content" data-simplebar>
                                    <main class="main-content t-mt-15 t-mb-15">
                                        <div class="check-container" style="text-align: center">
                                            <h2 style="width: 90%"><img
                                                    src="">
                                            </h2>
                                            <form id="up_detection">
                                            <div class="input-group" style="width: 1200px">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text" id="basic-addon3">https://www.xxx.com</span>
                                                </div>
                                                <input type="text" class="form-control" id="url_data" name="url_data"
                                                       aria-label="Text input with dropdown button" placeholder="输入url/电话进行检测">
                                                <div class="input-group-append">
                                                    <button class="btn btn-outline-secondary dropdown-toggle"
                                                            type="button" data-toggle="dropdown" aria-expanded="false" id="show_data">
                                                        检测网址
                                                        <input value="1" type="hidden" id="ction_type">
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="javascript:void(0)" onclick="click_ction(1)">检测网址</a>
                                                        <a class="dropdown-item" href="javascript:void(0)" onclick="click_ction(2)">检测手机号</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <br>
                                            <button type="button" class="btn btn-primary" onclick="detection()">点击进行检测</button>
                                            </form>
                                        </div>
                                        <br>
                                        <div class="scan-result" id="url_result">
                                            <div class="card card-sm ">
                                                <div class="card-body">

                                                    <h3 class="card-title text-center">检测结果</h3>
                                                    <table class="table table-bordered">
                                                        <tbody style="text-align: center;">
                                                        <tr style="text-align: center;">
                                                            <td class='table-primary'><strong>url地址</strong></td>
                                                            <td class='table-primary'><strong>url安全性</strong></td>
                                                            <td class='table-primary'><strong>url检测信息</strong></td>
                                                            <td class='table-primary'><strong>ip地址</strong></td>
                                                            <td class='table-primary'><strong>属地</strong></td>
                                                        </tr>
                                                        </tbody>
                                                        <tr id="url_text_data">
                                                        </tr>
                                                    </table>
                                                    <span style="display: flex; justify-content: center;">请输入网址进行检测</span>

                                                </div>
                                            </div>
                                        </div>
                                        <div class="scan-result" id="phone_result" style="display: none">
                                            <div class="card card-sm ">
                                                <div class="card-body">

                                                    <h3 class="card-title text-center">检测结果</h3>
                                                    <table class="table table-bordered">
                                                        <tbody style="text-align: center;">
                                                        <tr style="text-align: center;">
                                                            <td class='table-primary'><strong>电话号码</strong></td>
                                                            <td class='table-primary'><strong>电话号码属地</strong></td>
                                                            <td class='table-primary'><strong>电话号码安全性</strong></td>
                                                            <td class='table-primary'><strong>检测信息</strong></td>
                                                        </tr>
                                                        <tr id="phone_text_data">
                                                        </tr>

                                                        </tbody>

                                                    </table>
                                                    <span id="phone_text_data_hidden" style="display: flex; justify-content: center;">请输入手机号进行检测</span>

                                                </div>
                                            </div>
                                        </div>
                                    </main>

                                    <footer class="t-mb-30">
                                        <div class="container-fluid px-3">
                                            <div class="row g-3">
                                                <div class="col-12">
                                                    <div
                                                        class="t-pt-15 t-pb-15 cards t-bg-white t-shadow text-center sm-text">
                                                        <span class="t-text-dark">&copy;</span> <a href="#"
                                                            class="t-link t-link--alpha text-capitalize">Adminage</a>
                                                        <span class="t-text-dark text-capitalize">all right By <a href="http://www.bootstrapmb.com/">bootstrapmb</a>
                                                            2020</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </footer>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Wrapper End -->

    <!-- jquery -->
    <script src="{% static 'assets/js/jquery.js' %}"></script>
    <script src="{% static 'assets/js/jquery-ui.min.js' %}"></script>

    <!-- Date and Time  -->
    <script src="{% static 'assets/js/moment.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap-material-datetimepicker.js' %}"></script>

    <!-- Bootstrap -->
    <script src="{% static 'assets/js/bootstrap.bundle.min.js' %}"></script>
    <!-- Slick Slider  -->
    <script src="{% static 'assets/js/slick.min.js' %}"></script>
    <!-- Owl carousel -->
    <script src="{% static 'assets/js/owl.carousel.min.js' %}"></script>
    <!-- simplebar -->
    <script src="{% static 'assets/js/simplebar.js' %}"></script>
    <!-- Prism JS  -->
    <script src="{% static 'assets/js/prism.js' %}"></script>
    <!-- Feather Icon  -->
    <script src="{% static 'assets/js/feather.js' %}"></script>
    <!-- Nice Select  -->
    <script src="{% static 'assets/js/jquery.nice-select.min.js' %}"></script>
    <!-- Dropzone  -->
    <script src="{% static 'assets/js/dropzone.js' %}"></script>
    <!-- ION Range Slider  -->
    <script src="{% static 'assets/js/ion.rangeSlider.js' %}"></script>
    <!-- Touchspin  -->
    <script src="{% static 'assets/js/jquery.bootstrap-touchspin.min.js' %}"></script>
    <!-- Rating Bar -->
    <script src="{% static 'assets/js/jquery.barrating.min.js' %}"></script>
    <!-- Calendar  -->
    <script src="{% static 'assets/js/fullcalendar.min.js' %}"></script>
    <!-- Main script -->
    <script src="{% static 'assets/js/main.js' %}"></script>
<script>
    function click_ction(onclick_type){
        if (onclick_type == 1){
            $('#show_data').text('检测网址');
            $('#ction_type').val(1);
            $('#url_result').css('display','block');
            $('#phone_result').css('display','none');
        } else{
            $('#show_data').text('检测手机号');
            $('#ction_type').val(2);
            $('#url_result').css('display','none');
            $('#phone_result').css('display','block');
        }
    }
    {#$('#up_detection').submit(function () {#}
    {#    event.preventDefault();#}
    {#    var formData = $(this).serialize();#}
    {#    $.ajax({#}
    {#        url: '{% url 'detection' %}',#}
    {#        dataType: "json",#}
    {#        data:formData,#}
    {#        type: "post",#}
    {#        success:function(res){#}
    {#            console.log('调用成功')#}
    {#            // Notiflix.Notify.Info(res.msg);#}
    {#        },#}
    {#        error:function(){#}
    {#            alert('failed!');#}
    {#        },#}
    {#    });#}
    {# });#}
    function detection() {
        var url_data = $('#url_data').val();
        var type = $('#ction_type').val();
        $.ajax({
            url: '{% url 'detection' %}',
            dataType: "json",
            data:{
                'url_data':url_data,
                'type':type,
            },
            type: "post",
            success:function(res){
                console.log('调用成功');
                console.log(res);
                if(type == '1'){
                    $('#url_text_data').html('<td>'+res['url']+'</td><td>'+res['url_ip']+'</td><td>'+res['phone_type']+'</td><td>'+res['url_content']+'</td><td>'+res['url_address']+'</td>')
                }else{
                    $('#phone_text_data').html('<td>'+res['phone']+'</td><td>'+res['phone_address']+'</td><td>'+res['phone_type']+'</td><td>'+res['phone_content']+'</td>')
                }
             },
            error:function(){
                alert('failed!');
            },
        });
    }
</script>
</body>

</html>
